<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .detail-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .detail-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            overflow: hidden;
        }
        .movie-poster {
            width: 150px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
        }
        .order-status {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
        }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-paid { background: #d1edff; color: #0c5460; }
        .status-cancelled { background: #f8d7da; color: #721c24; }
        .status-refunded { background: #d4edda; color: #155724; }
        .status-expired { background: #f8d7da; color: #721c24; }
        .seat-badge {
            background: #667eea;
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 15px;
            font-size: 0.9rem;
            margin-right: 0.5rem;
            display: inline-block;
            margin-bottom: 0.3rem;
        }
        .info-row {
            border-bottom: 1px solid #f0f0f0;
            padding: 1rem 0;
        }
        .info-row:last-child {
            border-bottom: none;
        }
        .info-label {
            font-weight: 600;
            color: #666;
            margin-bottom: 0.5rem;
        }
        .info-value {
            color: #333;
        }
        .price-highlight {
            font-size: 1.5rem;
            font-weight: bold;
            color: #dc3545;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>

            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="${pageContext.request.contextPath}/movies">
                    <i class="fas fa-film me-1"></i>电影
                </a>
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                            <i class="fas fa-user-edit me-2"></i>个人信息
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 详情头部 -->
    <section class="detail-header">
        <div class="container">
            <div class="d-flex align-items-center">
                <a href="${pageContext.request.contextPath}/user/orders" class="btn btn-light me-3">
                    <i class="fas fa-arrow-left me-1"></i>返回订单列表
                </a>
                <div>
                    <h2><i class="fas fa-receipt me-2"></i>订单详情</h2>
                    <p class="mb-0">订单号：${order.orderNo}</p>
                </div>
            </div>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 订单详情卡片 -->
        <div class="detail-card">
            <div class="card-header bg-light">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">订单信息</h5>
                    <c:choose>
                        <c:when test="${order.status == 'PENDING'}">
                            <span class="order-status status-pending">待支付</span>
                        </c:when>
                        <c:when test="${order.status == 'PAID'}">
                            <span class="order-status status-paid">已支付</span>
                        </c:when>
                        <c:when test="${order.status == 'CANCELLED'}">
                            <span class="order-status status-cancelled">已取消</span>
                        </c:when>
                        <c:when test="${order.status == 'REFUNDED'}">
                            <span class="order-status status-refunded">已退款</span>
                        </c:when>
                        <c:when test="${order.status == 'EXPIRED'}">
                            <span class="order-status status-expired">已过期</span>
                        </c:when>
                    </c:choose>
                </div>
            </div>

            <div class="card-body p-4">
                <div class="row">
                    <!-- 电影海报 -->
                    <div class="col-md-3 text-center">
                        <img src="${order.showtime.movie.posterUrl != null ? order.showtime.movie.posterUrl : '/images/default-poster.jpg'}"
                             class="movie-poster mb-3" alt="${order.showtime.movie.title}">
                        <h6>${order.showtime.movie.title}</h6>
                    </div>

                    <!-- 订单信息 -->
                    <div class="col-md-6">
                        <div class="info-row">
                            <div class="info-label">订单号</div>
                            <div class="info-value">${order.orderNo}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">影院信息</div>
                            <div class="info-value">
                                ${order.showtime.cinema.name}<br>
                                <small class="text-muted">${order.showtime.cinema.address}</small>
                            </div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">影厅</div>
                            <div class="info-value">${order.showtime.hall.name}</div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">放映时间</div>
                            <div class="info-value">
                                <fmt:formatDate value="${order.showtime.showDate}" pattern="yyyy年MM月dd日"/>
                                <fmt:formatDate value="${order.showtime.showTime}" pattern="HH:mm"/>
                            </div>
                        </div>

                        <div class="info-row">
                            <div class="info-label">购票数量</div>
                            <div class="info-value">${order.ticketCount} 张</div>
                        </div>

                        <c:if test="${not empty order.orderSeats}">
                            <div class="info-row">
                                <div class="info-label">座位信息</div>
                                <div class="info-value">
                                    <c:forEach var="orderSeat" items="${order.orderSeats}">
                                        <span class="seat-badge">
                                            ${orderSeat.seat.rowNum}排${orderSeat.seat.seatNum}座
                                        </span>
                                    </c:forEach>
                                </div>
                            </div>
                        </c:if>

                        <div class="info-row">
                            <div class="info-label">下单时间</div>
                            <div class="info-value">
                                <fmt:formatDate value="${order.createdAt}" pattern="yyyy-MM-dd HH:mm:ss"/>
                            </div>
                        </div>
                    </div>

                    <!-- 价格和操作 -->
                    <div class="col-md-3 text-center">
                        <div class="mb-4">
                            <div class="info-label">订单金额</div>
                            <div class="price-highlight">¥${order.totalAmount}</div>
                        </div>

                        <div class="d-grid gap-2">
                            <c:if test="${order.status == 'PENDING'}">
                                <a href="${pageContext.request.contextPath}/user/payment?orderNo=${order.orderNo}"
                                   class="btn btn-primary">
                                    <i class="fas fa-credit-card me-2"></i>立即支付
                                </a>
                                <button type="button" class="btn btn-outline-secondary"
                                        onclick="cancelOrder('${order.orderNo}')">
                                    <i class="fas fa-times me-2"></i>取消订单
                                </button>
                            </c:if>

                            <c:if test="${order.status == 'PAID'}">
                                <a href="${pageContext.request.contextPath}/user/orders?action=change&orderNo=${order.orderNo}"
                                   class="btn btn-warning">
                                    <i class="fas fa-exchange-alt me-2"></i>改票
                                </a>
                                <button type="button" class="btn btn-outline-danger"
                                        onclick="refundOrder('${order.orderNo}')">
                                    <i class="fas fa-undo me-2"></i>申请退票
                                </button>
                            </c:if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function cancelOrder(orderNo) {
            if (confirm('确定要取消这个订单吗？')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/user/orders'
                });

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'cancel'
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'orderNo',
                    value: orderNo
                }));

                $('body').append(form);
                form.submit();
            }
        }

        function refundOrder(orderNo) {
            if (confirm('确定要申请退票吗？退票后将按照退票规则扣除相应手续费。')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/user/orders'
                });

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'refund'
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'orderNo',
                    value: orderNo
                }));

                form.append($('<input>', {
                    type: 'hidden',
                    name: 'reason',
                    value: '用户主动退票'
                }));

                $('body').append(form);
                form.submit();
            }
        }
    </script>
</body>
</html>
